import React from 'react';
import { connect } from 'dva';
import { Modal, Form, Table } from 'antd';

@Form.create()
@connect(({ gmvConf, loading }) => ({
  gmvConf,
  loading: loading.models.gmvConf,
}))
class ProductLisForm extends React.Component {
  static defaultProps = {
    idList: [],
    modalVisible: false,
    handleModalVisible: () => {},
  };

  state = {
    dataSource: [],
    columns: [],
  };

  constructor(props) {
    super(props);
    this.formLayout = {
      labelCol: { span: 7 },
      wrapperCol: { span: 13 },
    };
  }

  componentDidMount() {
    this.queryProductInfo();
  }

  queryProductInfo = () => {
    const { dispatch, idList } = this.props;
    console.log(idList);
    dispatch({
      type: 'report/queryData',
      payload: {
        reportCode: 'jJELM6TRjo',
        params: {
          idList,
        },
      },
      callback: (state, message, data) => {
        if (state === 0 && data) {
          this.handlerData(data);
        } else {
          // 默认化状态
          this.setState({
            dataSource: [],
            columns: [],
          });
        }
      },
    });
  };

  // 处理查询数据
  handlerData = data => {
    const { columns, rows } = data;
    // 对表格数据进行处理
    const arr = [];
    if (columns) {
      columns.forEach(c => {
        arr.push({
          title: c.showName,
          dataIndex: c.name,
        });
      });
    }
    this.setState({
      dataSource: rows,
      columns: arr,
    });
  };

  render() {
    const { modalVisible, handleModalVisible } = this.props;
    const { dataSource, columns } = this.state;
    return (
      <Modal
        destroyOnClose
        maskClosable={false}
        width={640}
        style={{ top: 20 }}
        title="活动商品列表"
        visible={modalVisible}
        onCancel={() => handleModalVisible(false)}
        onOk={() => handleModalVisible(false)}
      >
        <Table
          dataSource={dataSource}
          columns={columns}
          rowKey={record => record.city_product_id}
        />
      </Modal>
    );
  }
}

export default ProductLisForm;
